<template>
  <div>
    <Bg title="药品展示"></Bg>
    <div class="eg-list" v-for="item in products" :key="item.name">
      <div class="eg-list-item">
        <div class="date">
          <span>{{item.year}}</span>
          <strong>{{item.time}}</strong>
        </div>
        <div class="pic">
          <img src="../../../assets/img/product-yao1.jpg" alt="">
        </div>
        <div class="introduce">
          <h1>{{item.name}}</h1>
          <h2>{{item.price}}</h2>
          <p>{{item.des}}</p>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
import Bg from '@/components/content/bgContainer/Index';

export default {
  name: 'Index',
  data() {
    return {
      products: [
        {
          year: "2022-11",
          time: "01",
          name: "蓝芩口服液",
          price: "￥48",
          des: "商品促销信息以商品详情页“促销”栏中的信息为准；商品的具体成交价、预约价以订单结算页价格为准；如您发现活动信息、商品价格或促销信息有异常，建议购买前先联系销售商咨询。"
        },
        {
          year: "2022-11",
          time: "02",
          name: "蓝芩口服液",
          price: "￥48",
          des: "商品促销信息以商品详情页“促销”栏中的信息为准；商品的具体成交价、预约价以订单结算页价格为准；如您发现活动信息、商品价格或促销信息有异常，建议购买前先联系销售商咨询。"
        },
        {
          year: "2022-11",
          time: "03",
          name: "蓝芩口服液",
          price: "￥48",
          des: "商品促销信息以商品详情页“促销”栏中的信息为准；商品的具体成交价、预约价以订单结算页价格为准；如您发现活动信息、商品价格或促销信息有异常，建议购买前先联系销售商咨询。"
        },
        {
          year: "2022-11",
          time: "04",
          name: "蓝芩口服液",
          price: "￥48",
          des: "商品促销信息以商品详情页“促销”栏中的信息为准；商品的具体成交价、预约价以订单结算页价格为准；如您发现活动信息、商品价格或促销信息有异常，建议购买前先联系销售商咨询。"
        },
        {
          year: "2022-11",
          time: "05",
          name: "蓝芩口服液",
          price: "￥48",
          des: "商品促销信息以商品详情页“促销”栏中的信息为准；商品的具体成交价、预约价以订单结算页价格为准；如您发现活动信息、商品价格或促销信息有异常，建议购买前先联系销售商咨询。"
        },
      ],
    };
  },
  created() {
  },
  methods: {
    
  },
  components: {
    Bg,
  },
};
</script>

<style lang="less" scoped>
  .eg-list{
    width: 80%;
    margin: 0 auto;
    .eg-list-item{
      width: 100%;
      display: flex;
      align-items: center;
      margin: 30px 0;
      .date{
        width: 110px;
        span{
          font-size: 20px;
          display: block;
          font-weight: bold;
          text-indent: 5px;
        }
        strong{
          font-size: 100px;
          display: block;
          font-weight: bold;
          line-height: 100%;
        }
      }
      .pic{
        margin-right: 40px;
        img{
          width: 252px;
        }
      }
      .introduce{
        h1{
          font-weight: normal;
          color: #474747;
          margin-bottom: 20px;
        }
        p{
          margin-top: 5px;
          font-size: 12px;
        }
      }
    }
  }
</style>
